<template>
  <div class="app-container">
    <el-row :gutter="20" class="full-height">
      <splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="modern-splitpanes">
        <!-- 部门树 -->
        <pane size="20" min-size="15" class="tree-pane">
          <el-col class="tree-section">
            <div class="tree-header">
              <h4 class="tree-title">
                <i class="el-icon-office-building"></i>
                部门管理
              </h4>
              <el-input 
                v-model="deptName" 
                placeholder="搜索部门..." 
                clearable 
                size="small" 
                prefix-icon="el-icon-search" 
                class="search-input"
              />
            </div>
            <div class="tree-container">
              <el-tree 
                :data="deptOptions" 
                :props="defaultProps" 
                :expand-on-click-node="false" 
                :filter-node-method="filterNode" 
                ref="tree" 
                node-key="id" 
                :default-expanded-keys="defaultExpandedKeys"
                highlight-current 
                @node-click="handleNodeClick"
                class="custom-tree"
              />
            </div>
          </el-col>
        </pane>
        <!-- 套餐列表 -->
        <pane size="80" class="content-pane">
          <el-col class="content-section">
            <div class="content-header">
              <div class="header-left">
                <h4 class="content-title">
                  <i class="el-icon-s-grid"></i>
                  套餐配置
                </h4>
                <span class="subtitle" v-if="selectedDeptId">当前选中部门的套餐信息</span>
              </div>
              <div class="header-actions">
                <el-button 
                  type="primary" 
                  icon="el-icon-plus" 
                  size="medium" 
                  @click="handleAdd"
                  class="add-btn"
                >
                  新增套餐
                </el-button>
              </div>
            </div>
            
            <div class="table-container" v-if="selectedDeptId">
              <el-table 
                v-loading="loading" 
                :data="tableData" 
                class="modern-table"
                stripe
                header-cell-class-name="table-header"
              >
                <el-table-column prop="installPrice" label="预缴运维费与安装费" min-width="600">
                  <template slot-scope="scope">
                    <div class="install-price-list" v-if="getInstallPriceList(scope.row.installPrice).length">
                      <div class="install-item-simple" v-for="(item, index) in getInstallPriceList(scope.row.installPrice)" :key="index">
                        {{ item.name }} | {{ item.installType }} | {{ item.years }} | 月租¥{{ parseFloat(item.monthlyRent || 0).toFixed(0) }} | 安装费¥{{ parseFloat(item.installFee || 0).toFixed(0) }} | 抓拍枪费¥{{ parseFloat(item.poleFee || 0).toFixed(0) }} | 总价¥{{ parseFloat(item.price || 0).toFixed(0) }}
                      </div>
                    </div>
                    <span class="empty-value" v-else>未设置</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cardPrice" label="门卡价格" min-width="120">
                  <template slot-scope="scope">
                    <div class="price-cell">
                      <i class="el-icon-postcard price-icon"></i>
                      <span class="price-value" v-if="scope.row.cardPrice">¥{{ scope.row.cardPrice.toFixed(2) }}</span>
                      <span class="empty-value" v-else>未设置</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="giftMonthOfByOneYear" label="购买一年赠送月份" min-width="160">
                  <template slot-scope="scope">
                    <div class="gift-cell">
                      <i class="el-icon-present gift-icon"></i>
                      <span class="gift-value" v-if="scope.row.giftMonthOfByOneYear">{{ scope.row.giftMonthOfByOneYear }}个月</span>
                      <span class="empty-value" v-else>未设置</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="160" fixed="right">
                  <template slot-scope="scope">
                    <div class="action-buttons">
                      <el-button 
                        type="text" 
                        size="small" 
                        @click="handleEdit(scope.row)"
                        class="edit-btn"
                      >
                        <i class="el-icon-edit"></i>
                        修改
                      </el-button>
                      <el-button 
                        type="text" 
                        size="small" 
                        @click="handleDelete(scope.row)"
                        class="delete-btn"
                      >
                        <i class="el-icon-delete"></i>
                        删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              
              <div class="pagination-container" v-show="total>0">
                <pagination
                  :total="total"
                  :page.sync="pageNum"
                  :limit.sync="pageSize"
                  @pagination="getList"
                />
              </div>
            </div>
            
            <div class="empty-state" v-else>
              <div class="empty-content">
                <i class="el-icon-folder-opened empty-icon"></i>
                <h3>请选择部门</h3>
                <p>请在左侧选择一个部门来查看和管理套餐配置</p>
              </div>
            </div>
          </el-col>
        </pane>
      </splitpanes>
    </el-row>
    
    <!-- 新增/编辑套餐弹窗 -->
    <el-dialog 
      :title="isEdit ? '编辑套餐' : '新增套餐'" 
      :visible.sync="open" 
      width="1200px" 
      append-to-body 
      class="modern-dialog"
      :close-on-click-modal="false"
    >
      <div class="dialog-content">
        <el-form ref="form" :model="form" label-width="140px" class="modern-form">
            <div class="form-section">
              <h4 class="section-title">
                <i class="el-icon-price-tag"></i>
                价格设置
              </h4>
              <el-form-item label="费用配置" required class="form-item">
                <div class="install-price-config">
                  <div class="config-header">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="addInstallPriceItem">
                      添加配置
                    </el-button>
                    <el-button type="success" size="small" icon="el-icon-download" @click="importTemplate">
                      导入模板
                    </el-button>
                  </div>
                  <div class="config-item" v-for="(item, index) in form.installPrice" :key="index">
                    <div class="config-row">
                      <div class="config-field">
                        <label>序号名称</label>
                        <el-input v-model="item.name" placeholder="如：方案1" size="small" :disabled="true" />
                      </div>
                      <div class="config-field">
                        <label>月租</label>
                        <el-input-number 
                          v-model="item.monthlyRent" 
                          :min="0" 
                          :precision="2" 
                          placeholder="月租"
                          size="small"
                          controls-position="right"
                        />
                      </div>
                      <div class="config-field">
                        <label>升级/新装</label>
                        <el-select v-model="item.installType" placeholder="请选择" size="small">
                          <el-option label="升级" value="升级"></el-option>
                          <el-option label="新装" value="新装"></el-option>
                        </el-select>
                      </div>
                      <div class="config-field">
                        <label>年限</label>
                        <el-input v-model="item.years" placeholder="如：1年" size="small" />
                      </div>
                      <div class="config-field">
                        <label>安装费</label>
                        <el-input-number 
                          v-model="item.installFee" 
                          :min="0" 
                          :precision="2" 
                          placeholder="安装费"
                          size="small"
                          controls-position="right"
                          @change="calculatePrice(item)"
                        />
                      </div>
                      <div class="config-field">
                        <label>抓拍枪费</label>
                        <el-input-number 
                          v-model="item.poleFee" 
                          :min="0" 
                          :precision="2" 
                          placeholder="抓拍枪费"
                          size="small"
                          controls-position="right"
                          @change="calculatePrice(item)"
                        />
                      </div>
                      <div class="config-field">
                        <label>总价</label>
                        <el-input-number 
                          v-model="item.price" 
                          :min="0" 
                          :precision="2" 
                          placeholder="总价"
                          size="small"
                          controls-position="right"
                          :disabled="true"
                        />
                      </div>
                      <div class="config-actions">
                        <el-button 
                          type="danger" 
                          size="mini" 
                          icon="el-icon-delete" 
                          @click="removeInstallPriceItem(index)"
                          circle
                        ></el-button>
                      </div>
                    </div>
                  </div>
                  <div v-if="form.installPrice.length === 0" class="empty-config">
                    <p>暂无配置，请点击"添加配置"或"导入模板"</p>
                  </div>
                </div>
                <span class="field-tip">配置不同预缴年数对应的费用信息</span>
              </el-form-item>
            
            <el-form-item label="门卡价格" required class="form-item">
              <el-input-number 
                v-model="form.cardPrice" 
                :min="0" 
                :precision="2" 
                placeholder="请输入门卡价格"
                class="price-input"
                controls-position="right"
              >
                <template slot="prepend">¥</template>
              </el-input-number>
              <span class="field-tip">单张门禁卡费用</span>
            </el-form-item>
          </div>
          
          <div class="form-section">
            <h4 class="section-title">
              <i class="el-icon-present"></i>
              优惠设置
            </h4>
            <el-form-item label="购买一年赠送月份" class="form-item">
              <el-input-number 
                v-model="form.giftMonthOfByOneYear" 
                :min="0" 
                :max="12" 
                placeholder="请输入赠送月份"
                class="month-input"
                controls-position="right"
              />
              <span class="field-tip">购买一年服务赠送的免费月份数</span>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="submitForm" size="medium" class="submit-btn">
          <i class="el-icon-check"></i>
          {{ isEdit ? '更新套餐' : '创建套餐' }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
import { deptTreeSelect } from '@/api/system/user'
import { addPrice, listPrice, updatePrice, delPrice } from '@/api/door/price'

export default {
  name: 'Taocan',
  components: { Splitpanes, Pane },
  data() {
    return {
      deptName: '',
      deptOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [],
      selectedDeptId: null,
      open: false,
      form: {
        deptId: null,
        installPrice: [],
        cardPrice: null,
        giftMonthOfByOneYear: null
      },
      tableData: [],
      loading: false,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      isEdit: false,
      editId: null
    }
  },
  created() {
    this.getDeptTree()
  },
  methods: {
    // 获取默认模板数据
    getDefaultTemplate() {
      return [
        {
          name: '方案1',
          monthlyRent: 35,
          installType: '升级',
          years: '1年',
          installFee: 150,
          poleFee: 0,
          price: 150  // 150 + 0 = 150
        },
        {
          name: '方案2',
          monthlyRent: 35,
          installType: '升级',
          years: '2年',
          installFee: 0,
          poleFee: 0,
          price: 0   // 0 + 0 = 0
        },
        {
          name: '方案3',
          monthlyRent: 55,
          installType: '升级',
          years: '2年',
          installFee: 0,
          poleFee: 0,
          price: 0   // 0 + 0 = 0
        },
        {
          name: '方案4',
          monthlyRent: 35,
          installType: '新装',
          years: '2年',
          installFee: 150,
          poleFee: 0,
          price: 150  // 150 + 0 = 150
        },
        {
          name: '方案5',
          monthlyRent: 55,
          installType: '新装',
          years: '1年',
          installFee: 0,
          poleFee: 300,
          price: 300  // 0 + 300 = 300
        },
        {
          name: '方案6',
          monthlyRent: 55,
          installType: '新装',
          years: '2年',
          installFee: 0,
          poleFee: 150,
          price: 150  // 0 + 150 = 150
        }
      ]
    },
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.deptOptions = response.data
        // 设置默认展开到区级别（通常是前2级：省/市、区）
        this.setDefaultExpandedKeys(response.data)
      })
    },
    setDefaultExpandedKeys(treeData) {
      const expandedKeys = []
      
      // 递归函数，展开到指定层级
      const expandToLevel = (nodes, currentLevel, maxLevel) => {
        if (!nodes || currentLevel >= maxLevel) return
        
        nodes.forEach(node => {
          if (node.id) {
            expandedKeys.push(node.id)
          }
          // 继续展开子节点到下一级
          if (node.children && node.children.length > 0) {
            expandToLevel(node.children, currentLevel + 1, maxLevel)
          }
        })
      }
      
      // 展开到第2级（0基础，所以2表示展开省市区）
      expandToLevel(treeData, 0, 2)
      this.defaultExpandedKeys = expandedKeys
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      this.selectedDeptId = data.id
      this.pageNum = 1
      this.getList()
    },
    getList() {
      if (!this.selectedDeptId) return
      this.loading = true
      listPrice(this.selectedDeptId).then(res => {
        // 适配新接口结构
        let data = res.data || {}
        // 如果返回的数据有deptId，说明有套餐配置
        if (data.deptId) {
          this.tableData = [data]
          this.total = 1
        } else {
          this.tableData = []
          this.total = 0
        }
        this.loading = false
      }).catch(()=>{this.loading=false})
    },
    handleAdd() {
      if (!this.selectedDeptId) {
        this.$message.warning('请先选择左侧部门')
        return
      }
      this.form = {
        deptId: this.selectedDeptId,
        installPrice: JSON.parse(JSON.stringify(this.getDefaultTemplate())), // 深拷贝避免引用问题
        cardPrice: null,
        giftMonthOfByOneYear: null
      }
      this.open = true
      this.isEdit = false
      this.editId = null
    },
    handleEdit(row) {
      if (!this.selectedDeptId) {
        this.$message.warning('请先选择左侧部门')
        return
      }
      // 回显数据
      let installPriceData = []
      if (row.installPrice) {
        try {
          // 如果是字符串，尝试解析JSON
          let parsedData = row.installPrice
          if (typeof row.installPrice === 'string') {
            parsedData = JSON.parse(row.installPrice)
          }
          
          if (Array.isArray(parsedData)) {
            installPriceData = parsedData.map(item => ({
              name: item.name || '',
              monthlyRent: item.monthlyRent || 0,
              installType: item.installType || '升级',
              years: item.years || '',
              installFee: item.installFee || 0,
              poleFee: item.poleFee || 0,
              price: item.price || 0
            }))
          }
        } catch (e) {
          console.warn('解析installPrice失败:', e)
          installPriceData = []
        }
      }
      
      this.form = {
        deptId: this.selectedDeptId,
        installPrice: installPriceData,
        cardPrice: row.cardPrice,
        giftMonthOfByOneYear: row.giftMonthOfByOneYear
      }
      this.open = true
      this.isEdit = true
      this.editId = row.deptId
    },
    handleDelete(row) {
      this.$confirm('确定要删除该套餐吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row)
        delPrice(row.deptId).then(() => {
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    submitForm() {
      // 验证序号名称唯一性
      const names = this.form.installPrice.map(item => item.name).filter(name => name)
      const uniqueNames = [...new Set(names)]
      if (names.length !== uniqueNames.length) {
        this.$message.warning('序号名称不能重复')
        return
      }
      
      // 验证是否设置了安装费或门卡费
      const hasInstallPrice = this.form.installPrice.some(item => item.price && item.price > 0)
      if (!hasInstallPrice && !this.form.cardPrice) {
        this.$message.warning('请至少设置一个价格')
        return
      }
      
      // 过滤出有效的安装费配置并转换为字符串
      const validInstallPrice = this.form.installPrice
        .filter(item => item.name && item.years)
        .map(item => ({
          name: item.name,
          monthlyRent: parseFloat(item.monthlyRent) || 0,
          installType: item.installType,
          years: item.years,
          installFee: parseFloat(item.installFee) || 0,
          poleFee: parseFloat(item.poleFee) || 0,
          price: parseFloat(item.price) || 0
        }))
      
      // 提交数据
      const submitData = {
        deptId: this.form.deptId,
        installPrice: JSON.stringify(validInstallPrice),
        cardPrice: this.form.cardPrice,
        giftMonthOfByOneYear: this.form.giftMonthOfByOneYear
      }
      addPrice(submitData).then(() => {
        this.$message.success(this.isEdit ? '修改成功' : '新增成功')
        this.open = false
        this.getList()
        this.isEdit = false
      })
    },
    getInstallPriceList(installPrice) {
      if (!installPrice) return []
      
      try {
        // 如果是字符串，尝试解析JSON
        let parsedData = installPrice
        if (typeof installPrice === 'string') {
          parsedData = JSON.parse(installPrice)
        }
        
        if (Array.isArray(parsedData)) {
          return parsedData.filter(item => item.name && item.years)
        }
      } catch (e) {
        console.warn('解析installPrice失败:', e)
      }
      
      return []
    },
    // 添加安装费配置项
    addInstallPriceItem() {
      // 自动生成下一个方案编号
      const nextNumber = this.getNextPlanNumber()
      this.form.installPrice.push({
        name: `方案${nextNumber}`,
        monthlyRent: 0,
        installType: '升级',
        years: '',
        installFee: 0,
        poleFee: 0,
        price: 0
      })
    },
    // 删除安装费配置项
    removeInstallPriceItem(index) {
      this.form.installPrice.splice(index, 1)
    },
    // 导入模板
    importTemplate() {
      this.$confirm('导入模板将覆盖当前配置，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.installPrice = JSON.parse(JSON.stringify(this.getDefaultTemplate()))
        this.$message.success('模板导入成功')
      }).catch(() => {
        this.$message.info('已取消导入')
      })
    },
    // 计算总价（安装费 + 拍杆费）
    calculatePrice(item) {
      const installFee = parseFloat(item.installFee) || 0
      const poleFee = parseFloat(item.poleFee) || 0
      item.price = installFee + poleFee
    },
    // 获取下一个方案编号
    getNextPlanNumber() {
      const existingNumbers = this.form.installPrice
        .map(item => {
          // 从"方案1"、"方案2"等格式中提取数字
          const match = item.name.match(/方案(\d+)/)
          return match ? parseInt(match[1]) : 0
        })
        .filter(num => num > 0)
      
      // 如果没有现有方案，从1开始
      if (existingNumbers.length === 0) {
        return 1
      }
      
      // 找到最大编号并+1
      const maxNumber = Math.max(...existingNumbers)
      return maxNumber + 1
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 40px);
}

.full-height {
  height: calc(100vh - 40px);
}

/* 分隔面板样式 */
.modern-splitpanes {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 左侧树形区域 */
.tree-pane {
  background: white;
  border-right: 1px solid #e4e7ed;
}

.tree-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.tree-header {
  padding: 20px;
  border-bottom: 1px solid #f0f2f5;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.tree-title {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-title i {
  font-size: 18px;
}

.search-input {
  border-radius: 20px;
}

.search-input ::v-deep .el-input__inner {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border-radius: 20px;
}

.search-input ::v-deep .el-input__inner::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.search-input ::v-deep .el-input__prefix {
  color: rgba(255, 255, 255, 0.8);
}

.tree-container {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.custom-tree {
  background: transparent;
}

.custom-tree ::v-deep .el-tree-node__content {
  padding: 8px 0;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: all 0.3s ease;
}

.custom-tree ::v-deep .el-tree-node__content:hover {
  background: #f0f9ff;
  color: #1890ff;
}

.custom-tree ::v-deep .is-current > .el-tree-node__content {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: white;
  font-weight: 500;
}

/* 右侧内容区域 */
.content-pane {
  background: white;
}

.content-section {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.content-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.content-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-title i {
  color: #1890ff;
  font-size: 20px;
}

.subtitle {
  color: #8c8c8c;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.add-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
}

.add-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
}

/* 表格容器 */
.table-container {
  flex: 1;
  padding: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modern-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  flex: 1;
}

.modern-table ::v-deep .table-header {
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  color: #475569;
  font-weight: 600;
  border: none;
}

.modern-table ::v-deep .el-table__body tr:hover > td {
  background: #f0f9ff;
}

.modern-table ::v-deep .el-table td {
  border: none;
  padding: 16px 20px;
}

/* 价格单元格样式 */
.price-cell, .gift-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 安装费列表样式 */
.install-price-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.install-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.year-tag {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}

/* 安装费配置表单样式 */
.install-price-config {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-header {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.config-item {
  padding: 20px;
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.config-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.config-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: end;
  min-width: 100%;
}

.config-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 100px;
}

.config-field label {
  font-size: 12px;
  color: #666;
  font-weight: 500;
}

.config-field .el-select,
.config-field .el-input,
.config-field .el-input-number {
  width: 100%;
}

.config-actions {
  display: flex;
  align-items: flex-end;
  padding-bottom: 4px;
}

.empty-config {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  background: #f9f9f9;
  border-radius: 8px;
  border: 1px dashed #ddd;
}

.empty-config p {
  margin: 0;
  font-size: 14px;
}

/* 表格显示样式更新 */
.install-item-simple {
  padding: 8px 12px;
  margin-bottom: 4px;
  background: #f8fafc;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s ease;
}

.install-item-simple:hover {
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.install-item-simple:last-child {
  margin-bottom: 0;
}

.price-icon {
  color: #52c41a;
  font-size: 16px;
}

.gift-icon {
  color: #fa541c;
  font-size: 16px;
}

.price-value {
  font-weight: 600;
  color: #52c41a;
  font-size: 16px;
}

.gift-value {
  font-weight: 500;
  color: #fa541c;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.edit-btn {
  color: #1890ff;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.edit-btn:hover {
  background: #e6f7ff;
  color: #096dd9;
}

.delete-btn {
  color: #ff4d4f;
  padding: 6px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.delete-btn:hover {
  background: #fff2f0;
  color: #cf1322;
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  text-align: center;
}

/* 空状态 */
.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
}

.empty-content {
  text-align: center;
  color: #8c8c8c;
}

.empty-icon {
  font-size: 64px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.empty-content h3 {
  margin: 0 0 8px 0;
  color: #595959;
  font-size: 18px;
  font-weight: 500;
}

.empty-content p {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

/* 弹窗样式 */
.modern-dialog ::v-deep .el-dialog {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.modern-dialog ::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px 24px;
  border: none;
}

.modern-dialog ::v-deep .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 18px;
}

.modern-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 20px;
}

.dialog-content {
  padding: 24px;
}

.modern-form {
  margin: 0;
}

.form-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
}

.section-title {
  margin: 0 0 20px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #1890ff;
  padding-bottom: 8px;
}

.section-title i {
  color: #1890ff;
  font-size: 18px;
}

.form-item {
  margin-bottom: 24px;
}

.form-item ::v-deep .el-form-item__label {
  color: #262626;
  font-weight: 500;
  line-height: 1.5;
}

.price-input, .month-input {
  width: 100%;
}

.config-item .price-input {
  width: 200px;
  flex-shrink: 0;
}

.price-input ::v-deep .el-input-group__prepend {
  background: #f0f9ff;
  color: #1890ff;
  border-color: #d9f7be;
  font-weight: 600;
}

.price-input ::v-deep .el-input__inner,
.month-input ::v-deep .el-input__inner {
  border-radius: 8px;
  border-color: #d9d9d9;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.price-input ::v-deep .el-input__inner:focus,
.month-input ::v-deep .el-input__inner:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}


.empty-value {
  color: #bfbfbf;
  font-style: italic;
  font-size: 13px;
}


.field-tip {
  display: block;
  margin-top: 8px;
  color: #8c8c8c;
  font-size: 12px;
  line-height: 1.4;
}

.dialog-footer {
  padding: 16px 24px;
  background: #fafafa;
  border-top: 1px solid #f0f0f0;
  text-align: right;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.submit-btn {
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .config-row {
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 12px;
  }
  
  .modern-dialog ::v-deep .el-dialog {
    width: 90% !important;
    max-width: 1000px;
  }
}

@media (max-width: 768px) {
  .app-container {
    padding: 12px;
  }
  
  .content-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .table-container {
    padding: 16px;
  }
  
  .tree-header {
    padding: 16px;
  }
  
  .tree-container {
    padding: 16px;
  }
  
  .dialog-content {
    padding: 16px;
  }
  
  .form-section {
    padding: 16px;
    margin-bottom: 20px;
  }
  
  .config-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .item-details {
    grid-template-columns: 1fr 1fr;
  }
  
  .modern-dialog ::v-deep .el-dialog {
    width: 95% !important;
    margin: 5vh auto;
  }
}

/* 滚动条美化 */
.tree-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar {
  width: 6px;
}

.tree-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 动画效果 */
.modern-table,
.form-section,
.add-btn,
.edit-btn,
.delete-btn {
  transition: all 0.3s ease;
}

.table-container {
  animation: fadeInUp 0.6s ease-out;
}

.empty-state {
  animation: fadeIn 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
